﻿<section class="bg-white border-b py-8">
    <div class="container mx-auto m-8">
        <div class="md:grid md:grid-cols-5 md:gap-4">
            <div class="md:col-span-3 shadow border">
                <div style="width: 100%; height: 450px; position: relative;">
                    <CascadingValue Value="_diagram">
                        <DiagramCanvas>
                            <Widgets>
                                <GridWidget Size="30" Mode="GridMode.Line" BackgroundColor="white" />
                                <SelectionBoxWidget />
                                <NavigatorWidget Width="200" Height="150"
                                                 ViewStrokeColor="#40BABD"
                                                 NodeColor="#40BABD"
                                                 Class="border border-black bg-white absolute"
                                                 Style="bottom: 15px; right: 15px;" />
                            </Widgets>
                        </DiagramCanvas>
                    </CascadingValue>
                </div>
            </div>
            <div class="md:col-span-2 p-6">
                <h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
                    Groups
                </h3>
                <p class="text-gray-600 mb-4">
                    Blazor Diagrams supports groups and nested hierarchies. You can have:
                </p>
                <ul class="text-gray-600 list-disc list-inside">
                    <li>Nodes inside of groups</li>
                    <li>Groups inside of other groups</li>
                    <li>Group auto size to its children's bounds</li>
                    <li>Links, of course</li>
                </ul>
            </div>
        </div>
    </div>
</section>